<!DOCTYPE html>
<html >
    <head>
    <meta charset=utf-8>
        <title>财智冲关 四时有礼</title>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>     
       
    </head>
    <body>
	<div id="app" v-cloak>
		<p>微信openId: {{ weiXinUser.openId }}</p>
		<p>微信昵称: {{ weiXinUser.nickName }}</p>
		微信头像：<img id="headImgUrl" :src="weiXinUser.headImgUrl" stype="width:50px;height:50px"/>
		<div><a href="javascript:void(0)"  v-on:click="javascript:getShare()">召唤好友助力</a></div>
		
	</div>
<script type = "text/javascript">

  		//测试环境接口请求前缀
  		var api='http://yjwdtest.shassel.com/ask';
        var qs = Qs;
		new Vue({
			el:'#app',
			data:{
				weiXinUser:{
					openId:'',
					nickName:'',
					headImgUrl:''
				},
				weiXinShare:{}
			},
			beforeCreate:async function(){
			
			},
			created: async  function () {
			/*
			*必须采用同步调用的方式，axsio默认是异步执行的方式
			*/
			/**
			*本地调试代码
			const acId='MjAyMjA4MTUxMzQzMTMzNDUmJm9SX0MzdURlM0NpcTR6aGR2bUxYUkoxemJTWWMmJmRhYzAzMzNiLTVhZWMtNDFmNC1hYmYzLTczOWQyMDJiNGJlOQ';
			var data=await this.wxData(acId);
				console.log('我是最后执行对吗？');
				console.log(data);
				this.weiXinUser=data;
				*/
				this.initData();
				this.getShare();
			},
		methods:{
		/**
		*author xianyun
		*页面初始化调佣方法
		* 1：判断是否是微信浏览器，非微信浏览器 错误提示
		* 2:判断url地址栏是否含有acId参数，如果没有需要重定向到微信授权登录地址
		**/
        initData:async function(){
				var ua = navigator.userAgent.toLowerCase();
				var isWeixin = ua.indexOf('micromessenger') != -1;
			//非微信浏览器提示
			 if (!isWeixin) {
			  document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
			document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
  		}
  		//微信授权登录地址
  		var url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0238f569a7df689d&redirect_uri="+api+"/api/authorization/snsapi_userinfo&response_type=code&scope=snsapi_userinfo&state=456&connect_redirect=1#wechat_redirect";
		 var acId = this.getQueryVariable("acId");
		 if (!acId) {
			 window.location.replace(url);
		 }else{
			//根据活动id获取授权登录之后的微信头像和昵称
			//this.getWeiXinUser(acId);
			var data=await this.wxData(acId);
				console.log('我是最后执行对吗？');
				console.log(data);
				this.weiXinUser=data;
		 }
		
						
        
    },
    /**
     *@author xianyun
     * 采用同步方式，获取登录用户的微信用户信息
	 * 获取微信登录信息
	 */
     wxData:async function(acId){
		  try {
			 const f1= this.getWeiXinUser(acId);
			await Promise.all([f1]);
			return f1;
			console.log('finish')
		  } catch (err) {
			console.log(err.message || 'Uncatch Error')
		  }
     },    
     /**
     *@author xianyun
     * 采用异步方式，获取登录用户的微信用户信息
	 * 获取微信登录信息
	 */
	 getWeiXinUser: async  function(acId){
	 const param={'acId':acId};
	 var weiXinUserInfo={};
	   await axios
      .post(api+'/api/weixin/getWeiXinUserInfo',qs.stringify(param),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
      .then(function(response){
     const data=response.data.data;
     const code=response.data.code;
     if(code==1){
     console.log('我第一个执行？？？');
     //解析微信用户信息成功
             this.weiXinUser=data;
			 console.log(data);
			 console.log(this.weiXinUser);
			 weiXinUserInfo.openId=data.openId;
			  weiXinUserInfo.nickName=data.nickName;
			 weiXinUserInfo.headImgUrl=data.headImgUrl
			 console.log(this.weiXinUser.openId);
     }else{
     //解析微信用户信息失败
		alert(response.data.message);
     }
      })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
	 return weiXinUserInfo;
	},
	/**
	*获取url参数
	**/
	 getQueryVariable:function(variable)
	{
	       var query = window.location.search.substring(1);
	       var vars = query.split("&");
	       for (var i=0;i<vars.length;i++) {
	               var pair = vars[i].split("=");
	               if(pair[0] == variable){return pair[1];}
	       }
	       return(false);
	},
	/**
	*微信分享
	*@author xianyun
	*
	**/
	 getShare:async function(){
		
		 try{
			let url=window.location.href;//该链接域名或者路径必须与当前页面对应的公众号js安全域名一致
			 //var acId = this.getQueryVariable("acId");
			 acId='MjAyMjA4MTUxNTQ2MDY3NTcmJm9SX0MzdURlM0NpcTR6aGR2bUxYUkoxemJTWWMmJmRmZGMzZDNlLTQxMjItNGRkZC1hMjcwLWMzMDc4NjdiZjFlNg';
			var weiXinShare=await this.getWeiXinConfigData(url,acId);
			this.weiXinShare=weiXinShare;
			this.getJSSDK(weiXinShare);
			//微信分享start
			/**
				  wx.config({
					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: weiXinShare.appId, // 必填，公众号的唯一标识
					timestamp: weiXinShare.timestamp, // 必填，生成签名的时间戳
					nonceStr: weiXinShare.nonceStr, // 必填，生成签名的随机串--后端用小写  注意
					signature: weiXinShare.signature,// 必填，签名，见附录1
					jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				  });
				  wx.ready(function() {
					//config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
					//config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					console.log('weixin 验证成功');
					// 分享到朋友圈
					wx.onMenuShareTimeline({
					  title: weiXinShare.title, // 分享标题
					  link: weiXinShare.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					  imgUrl:weiXinShare.imgUrl, // 分享图标
					  success: function() {
					  // 用户确认分享后执行的回调函数
						console.log('分享成功');
						alert('分享成功');
					  },
					  cancel: function() {
					  // 用户取消分享后执行的回调函数
					  	console.log('用户取消分享');
					  alert('用户取消分享');
					  },
					});
					// 分享给朋友
					wx.onMenuShareAppMessage({
					  title: weiXinShare.title, // 分享标题
					  desc: weiXinShare.desc, // 分享描述
					  link: weiXinShare.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					  imgUrl:weiXinShare.imgUrl, // 分享图标
					  type: 'link', // 分享类型,music、video或link，不填默认为link
					  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
					  success: function() {
					  // 用户确认分享后执行的回调函数
					  alert(weiXinShare.desc);
					  alert('用户确认分享后执行的回调函数');
					  },
					  cancel: function() {
					  // 用户取消分享后执行的回调函数
					   alert('用户取消分享后执行的回调函数');
					  },
					});
				  });

				  wx.error(function(res) {
					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					console.log('weixin 验证失败');
					alert('weixin 验证失败');
					console.log(res);
				  });
			**/
			//微信分享end
			
			
			
			
			
			
		 }catch(e){
		 
		 }
	 
	 },
	 /**
	 *获取微信分享配置信息
	 *@author xianyun
	 *@parm url 当前页面的地址
	 *@parm acId  
	 **/
	 getWeiXinConfigData:async function(url, acId){
			 const param={'url':url,"acId":acId};
			 var shareWeiXinData={};
			   await axios
			  .post(api+'/api/weixin/getWxConfig',qs.stringify(param),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
			  .then(function(response){
			 const data=response.data.data;
			 const code=response.data.code;
			 if(code==1){
			 //解析微信分享配置信息成功
					 console.log(data);
					 shareWeiXinData=data;
			 }else{
			 //解析微信分享配置信息失败
				alert(response.data.message);
			 }
			  })
			  .catch(function (error) { // 请求失败处理
				console.log(error);
			  });
			 return shareWeiXinData;
	 },
	 /**
	 *微信分享api
	 **/
	 //要用到微信API
 getJSSDK:function(data) {
 const jsApiList = ['updateTimelineShareData','updateAppMessageShareData','onMenuShareAppMessage', 'onMenuShareTimeline','onMenuShareTimeline','onMenuShareAppMessage'];
    /*
     *  data 是调用getJSSDK 所返回来的 微信config 配置
     *  dataForWeixin 是分享所需要的 分享标题 副标题 图片等信息
     */
    wx.config({
        debug: true, // 可开启调试模式
        appId: data.appId, // 需要后端接口返回的appid
        timestamp: data.timestamp, // 需要后端接口返回的timeStamp
        nonceStr: data.nonceStr,// 需要后端接口返回的nonceStr
        signature: data.signature, // 需要后端接口返回的signature
        jsApiList: jsApiList,  // 注册的微信jsapi
        success: () => {
             alert('success')
        },
    });
    const link=window.location.href.split('#')[0];
    alert('link='+link);
    let shareData={
        title: data.title,
        desc: data.desc,
        link: link,
        imgUrl: data.imgUrl,
        trigger: function trigger (res) { },
        success: function success (res) { alert('已分享');
        },
        cancel: function cancel (res) { alert('已取消');
        },
        fail: function fail (res) {// alert('进来了');
        }
    };
    alert(JSON.stringify(data.link))
    alert(wx.updateAppMessageShareData);
    //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    wx.ready( function(){
        wx.updateAppMessageShareData({ ////需在用户可能点击分享按钮前就先调用
            title: data.title, // 分享标题
            desc: data.desc, // 分享描述
            link:  data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: data.imgUrl, // 分享图标
            success: function () {
                // 设置成功
                alert('需在用户可能点击分享按钮前就先调用');
            },fail:function(){
				alert('失败');
            },complete:function(){
				alert('完成');
            },cancel:function(){
				alert('取消');
            }
        });
        //自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
        wx.updateTimelineShareData({// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
            title: data.title, // 分享标题
            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl:  data.imgUrl, // 分享图标
            success: function (t) {
                // 设置成功
                alert('自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）');
            },fail:function(t){
				alert('失败');
            },complete:function(t){
				alert('完成');
            },cancel:function(t){
				alert('取消');
            }
        });
       
    });
    wx.error(function(res) { // 注册 wx.config的报错提示
       alert(JSON.stringify(res) + "微信验证-----错误信息错误信息错误信息-");
    });
}
	
	//微信分享api
	}
    })


    
   </script>
<style>
[v-cloak] {
  display: none;
}
</style>
    </body>
</html>
